<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="crud" :columns="columns" ref="crudRef">
      <template #tableAfterButtons>
        <a-button
            @click="openStep"
            type="outline"
            status="primary"
        ><template #icon><icon-unordered-list /></template>流程档案</a-button>

        <a-button
            @click="openCate"
            type="outline"
            status="primary"
        ><template #icon><IconAlignCenter /></template>分类档案</a-button>

<!--        <a-button-->
<!--            @click="openTag"-->
<!--            type="outline"-->
<!--            status="success"-->
<!--        ><template #icon><IconExperiment /></template>标签档案</a-button>-->

<!--        <a-button-->
<!--            @click="openQrcode"-->
<!--            type="outline"-->
<!--            status="primary"-->
<!--        ><template #icon><IconUpload /></template>活动码</a-button>-->
      </template>

      <template #logo_path="{ record }">
        <a-image :src="record.logo_path ? $tool.showFile(record.logo_path):''" height="80" />
      </template>
      <!--           排序列-->
      <template #sort="{ record }">
        <a-input-number
            :default-value="record.sort"
            mode="button"
            @change="changeSort($event, record.id)"
            :min="0"
            :max="1000"
        />
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
            :checked-value="1"
            :unchecked-value="2"
            @change="changeStatus($event, record.id)"
            :default-checked="record.status == 1"
        />
      </template>

      <template #logo="{ record }">
        <a-image :src="record.logo ? $tool.showFile(record.logo):''" height="40" />
      </template>

      <template #operationBeforeExtend="{ record }">
        <a-link @click="openPriceCycle(record)"><icon-edit /> 价格</a-link>
<!--        <a-link @click="editAct(record)"><icon-edit /> 流程</a-link>-->
        <a-link @click="openYoubaoForm(record)" v-if="record.act_type==2 "><icon-edit /> 表单</a-link>
        <a-link @click="openLc(record)"><icon-edit /> 流程</a-link>
        <a-link @click="openMsg(record)"><icon-message /> 公告</a-link>
      </template>
    </ma-crud>

    <act-cate ref="cateRef" />
<!--    <sys-tag ref="sysTagRef" />-->
    <edit ref="editRef" />
    <step ref="stepRef" />
    <activity-msg ref="activityMsgRef" />
<!--    <activity-qrcode ref="qrcodeRef" />-->
    <price-cycle ref="priceCycleRef" />
    <lc ref="lcRef" />
    <act-form ref="actFormRef" />
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'

import actCate from './components/activityCate.vue'
import step from './components/activityStep.vue'
// import sysTag from './components/sysTags.vue'
import activityMsg from './components/activityMsg.vue'
// import activityQrcode from './actQrcode.vue'
import edit from './edit.vue'
import priceCycle from './price_cycle.vue'
import lc from './lc.vue'
import actForm from './actForm.vue'

import api from '@/api/prm/activity.js'
import { Message } from '@arco-design/web-vue'

const crudRef = ref()
const editRef = ref()
const cateRef = ref()
// const sysTagRef = ref()
const stepRef = ref()
const activityMsgRef = ref()
// const qrcodeRef = ref()
const priceCycleRef = ref()
const lcRef = ref()
const actFormRef = ref()

//排序
const changeSort = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'sort' })
  if (response.success) {
    Message.success(response.message)
  }
}
//状态
const changeStatus = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'status' })
  if (response.success) {
    Message.success(response.message)
  }
}
//分类管理
const openCate = () => {
  cateRef.value.open()
}
//标签管理
// const openTag = () => {
//   sysTagRef.value.open()
// }
//二维码
// const openQrcode = () => {
//   qrcodeRef.value.open()
// }
//价格
const openPriceCycle = (record) => {
  priceCycleRef.value.open(record)
}
//编辑
// const editAct = (record) => {
//   editRef.value.open(record)
// }
const openYoubaoForm = (record) => {
  console.log(record);
  actFormRef.value.open(record)
}

const openStep = () => {
  stepRef.value.open()
}
const openMsg = (record) => {
  activityMsgRef.value.open(record)
}
const openLc = (record) => {
  lcRef.value.open(record)
}

//表格
const crud = reactive({
  api: api.list,
  showIndex: false,
  // pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 350,
  searchColNumber:3,
  add: {show: true, api: api.add, auth: ['prm:activity:save']},
  edit: {show: true, api: api.update, auth: ['prm:activity:update']},
  delete: {
    show: true,
    api: api.delete, auth: ['prm:activity:delete'],
  },
  formOption: {viewType: 'drawer',width: '850px',},
})

const platforms = ref([
  {label: '抖音', value: 1},
  {label: '快手', value: 2},
  {label: '视频号', value: 3},
  {label: '小红书', value: 4},
  {label: '其他', value: 5},
]);

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: false},
  {
    title: '活动名称', dataIndex: 'name', formType: 'input', search: true, width: 80,
    commonRules: [{required: true, message: '必须填写活动名称'}]
  },
  {
    title: '启用', dataIndex: 'status', search: false, formType: 'radio',
    dict: {name: 'data_status', props: {label: 'title', value: 'key'}},
    addDefaultValue: 2, width: 120, addDisplay: false, editDisplay: false
  },
  {
    title: '活动描述', dataIndex: 'remark', formType: 'input', search: false, width: 80,commonRules: [{required: true, message: '必须填写活动描述'}]
  },
  {
    title: 'LOGO', dataIndex: 'logo', search: false, commonRules: [{required: true, message: '必须上传logo'}],
    width: 100, formType: 'upload',type:'image'
  },
  {
    title: '所属分类', dataIndex: 'cate_id', search: true, width: 180,multiple:true,
    formType: 'select', dict: { url: 'prm/activity_cate/list', props: { label: 'name', value: 'id' }, translation: true }
  },
  // {
  //   title: '活动标签', dataIndex: 'tags', search: false, addDisplay: true, width: 200,multiple:true,
  //   formType: 'select', dict: { url: 'prm/sysTag/getAcivitySelectList', props: { label: 'name', value: 'id' }, translation: true }
  // },
  {
    title: '任务类型', dataIndex: 'act_type', search: true, width: 80,multiple:false, formType: 'select',
    dict: { data: [{ label: '地推', value: 1 }, { label: '网推', value: 2 },{label: '种草', value: 3}], translation: true },
    onControl: (value, maFormObject) => {
      const service = maFormObject.getColumnService()
      const dataIndexList = ['in_type','platforms','zc_times','zc_desc','zc_expired_min','ext1','ext2']

      if (value === 'undefined') {
        dataIndexList.map(name => service.get(name).setAttr('display', false))
        return
      }
      if (['2'].includes(value)) {
        dataIndexList.map(name => service.get(name).setAttr('display', ['in_type','ext1','ext2'].includes(name)))
        return
      }
      if (['3'].includes(value)) {
        dataIndexList.map(name => service.get(name).setAttr('display', ['platforms','zc_times','zc_desc','zc_expired_min'].includes(name)))
        return
      }
      dataIndexList.map(name => service.get(name).setAttr('display', false))
    },
  },
  {
    title: '接入方式', dataIndex: 'in_type', search: true, width: 80,multiple:false, formType: 'select',
    dict: { data: [{ label: '自营', value: 1 }, { label: '右豹', value: 2 }], translation: true },
    onControl: (value, maFormObject) => {
      const service = maFormObject.getColumnService()
      const dataIndexList = ['youbao_id','is_write_keyword','is_write_back']

      if (value === 'undefined') {
        dataIndexList.map(name => service.get(name).setAttr('display', false))
        return
      }
      if (['2'].includes(value)) {
        dataIndexList.map(name => service.get(name).setAttr('display', ['youbao_id','is_write_keyword','is_write_back'].includes(name)))
        return
      }
      dataIndexList.map(name => service.get(name).setAttr('display', false))
    },
  },
  {
    title: '平台', dataIndex: 'platforms', formType: 'select', width: 80,multiple:true,
    dict: {data: platforms, translation: true},
  },
  {
    title: '领取次数', dataIndex: 'zc_times', hide: true, search: false,formType: 'input-number', width: 80,
  },
  {
    title: '失效时间', dataIndex: 'zc_expired_min', hide: true, search: false, formType: 'input-number', width: 80,placeholder: '请输入失效时间(分钟)',
  },
  {
    title: '种草类领取说明', dataIndex: 'zc_desc', hide: true, search: false, formType: 'editor', width: 80,
  },
  {
    title: '支持上传关键词', dataIndex: 'is_write_keyword', formType: 'select', width: 80,
    dict: {data: [{label: '是', value: 1}, {label: '否', value: 2}], translation: true},
  },
  {
    title: '回填', dataIndex: 'is_write_back', formType: 'select', width: 80,
    dict: {data: [{label: '是', value: 1}, {label: '否', value: 2}], translation: true},
  },
  {
    title: '右豹活动', dataIndex: 'youbao_id', search: false, width: 100,multiple:false,
    formType: 'select', dict: { url: 'prm/activity/youbaoProject', props: { label: 'title', value: 'id' }, translation: true },
  },
  {
    title: '申请流程', dataIndex: 'ext1', hide: true, search: false, formType: 'editor', width: 80,
  },
  {
    title: '填写申请信息', dataIndex: 'ext2', hide: true, search: false, formType: 'editor', width: 80,
  },


  // {
  //   title: '活动标签', dataIndex: 'tags', search: false, addDisplay: true, width: 200,multiple:true,
  //   formType: 'select', dict: { url: 'prm/sysTag/getAcivitySelectList', props: { label: 'name', value: 'id' }, translation: true }
  // },
  {
    title: '排序', dataIndex: 'sort', formType: 'input-number', addDefaultValue: 1, width: 180,
  },
  {
    title: '预估收益', dataIndex: 'price', formType: 'input-number', width: 80,
  },
  {
    title: '申码审核', dataIndex: 'is_approve_apply', formType: 'select', width: 80,
    dict: { data: [{ label: '是', value: 1 }, { label: '否', value: 2 }], translation: true },

    addDefaultValue: 2,
    onControl: (value, maFormObject) => {
      const service = maFormObject.getColumnService()
      const dataIndexList = ['auto_apply_level']

      if (value === 'undefined') {
        dataIndexList.map(name => service.get(name).setAttr('display', false))
        return
      }
      if (['1'].includes(value)) {
        dataIndexList.map(name => service.get(name).setAttr('display', ['auto_apply_level'].includes(name)))
        return
      }
      dataIndexList.map(name => service.get(name).setAttr('display', false))
    },
  },
  {
    title: '免审等级', dataIndex: 'auto_apply_level', formType: 'select', width: 80,
    dict: { data: [{ label: '无', value: 0 }, { label: '白银', value: 1 },{ label: '黄金', value: 2 }, { label: '铂金', value: 3 },{ label: '钻石', value: 4 }, { label: '金钻', value: 5 }], translation: true },
    addDefaultValue: 0,
  },
  {
    title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: false, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:cpa'}
</script>

<style scoped>

</style>
